<template>
	<view>
		<navbar>
			<template v-slot:center>
				<view class="title">
					<text v-for="(item,index) in titles" v-bind:key="index" v-on:click="enableAlive(index)" :class="{active:currentIndex===index}">{{item}}</text>
				</view>
			</template>
		</navbar>
	</view>
</template>

<script>
	import navbar from '../../../components/common/navbar/NavBar.vue'
	export default {
		components:{
			navbar	
		},
		data() {
			return {
				titles:['商品','参数','评论','推荐'],
				currentIndex:0
			}
		},
		methods: {
			enableAlive(index){
				this.currentIndex=index
				this.$emit('NavBarIndex',index)
			},
		}
	}
</script>

<style scoped> 
.title{
    padding-top: 20rpx;
}
text{
    font-size: 24rpx;
    display: inline-block;
    margin: 0 20rpx;
    padding-bottom: 6rpx;
}
.active{
    border-bottom: 4rpx solid red;
    color: red;
}
</style>
